<template>
  <el-form-item class="edit-item edit-item-color color-normal" :label="label">
    <el-color-picker
      v-model="modelValue"
      @active-change="onChange($event)"
      @change="onChange($event)"
      size="small"
      :show-alpha="isAlpha"
      :color-format="format"
      :predefine="predefine">
    </el-color-picker>
  </el-form-item>
</template>

<script>
export default {
  emits: ['change','update:modelValue'],
  setup () {
    return {
      predefine: [
        "#FFFFFF",
        "#000000",
        "#333333",
        "#B8E986",
        "#D0021B",
        "#F5A623",
        "#F8E71C",
        "#7ED321",
        "#127BFF",
        "#BD10E0",
        "#9013FE",
        "#1DA1F2",
        "#3DD596"
      ]
    };
  },
  props: {  // format => hsl / hsv / hex / rgb
    label: String,
    modelValue: [String, Number],
    format: {
      type: String,
      default: '',
    },
    isAlpha: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    onChange(val) {
      if(!val){
        val = 'rgba(0, 0, 0, 0)'
      }
      this.$emit('update:modelValue', val)
      this.$emit('change', val)
    },
  },
};
</script>
